<template>
    <el-form ref="ruleFormRef" label-position="top" :model="form" :rules="formRules" label-width="auto"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item prop='ids' label="已选择转移的序列号">
                    <multipleSelectList v-model:model-value="form.ids" :data-list="transferList" label="SN"
                        value="id" />
                </el-form-item>
                <el-form-item :label='titles?.unityId' prop='unityId'>
                    <unitParentSelect v-model='form.unityId' clearable :placeholder='prompt?.unityId'
                        :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')"/>
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import multipleSelectList from '@/components/multipleSelectList/multipleSelectList.vue'
import { formValidateField } from '@/utils/functions'
type FormProps = {
    form: any,
    isLoading: false,
    transferList: any[]
}
const props = withDefaults(defineProps<FormProps>(), {
    form: {
        ids: null,
        unityId: null,
    },
    isLoading: false,
    transferList: () => []
});

const ruleFormRef = ref();
// const transferList = ref([] as any[])
const formRules = reactive(<FormRules>{
    // ids: [{ required: true, message: '请选择需要转移的序列号', trigger: 'blur' },],
    unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
});

onMounted(() => {
    // getTransferList().then(res => {
    //     transferList.value.push(...res.result)
    // })
})


function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style lang="scss" scoped></style>